import React, { useState } from 'react'
import { Button, Input, Drawer, Form, Switch, InputNumber, Upload, message } from 'antd'
import request from '@/utils/request'
import { UploadOutlined } from '@ant-design/icons'


const { TextArea } = Input
export default (props: any) => {

    const { getList, visbale, id, close, form } = props;

    const onSubmit = (values: any) => {

        if (values.upload && values.upload.length > 0) {
            values.logo = values.upload[0]['url'];
        }
        request(`/goods/brand/${id}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message)
            close()
            getList()
        })
    }

    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };

    return (
        <Drawer
            title={id > 0 ? "修改" : "添加"}
            placement="right"
            closable={false}
            onClose={() => {
                close()
            }}
            visible={visbale}
            width="30%"
            getContainer={false}
        >
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                onFinish={onSubmit}
                form={form}
                initialValues={{ is_recommend: true }}
            >
                <Form.Item label="品牌名称" required name="title"
                    rules={[{ required: true, message: '请输入品牌名称' }]}
                >
                    <Input placeholder="请输入品牌名称" value={"hello"} />
                </Form.Item>
                <Form.Item label="品牌首字母" required name="initial"
                    rules={[{ required: true, message: '请输入品牌首字母' }]}
                >
                    <Input placeholder="请输入品牌首字母" />
                </Form.Item>
                <Form.Item label="品牌描述" name="describe">
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item label="是否推荐" name="is_recommend" valuePropName="checked">
                    <Switch defaultChecked />
                </Form.Item>
                <Form.Item label="图片" name="upload" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                    <Upload
                        action='http://127.0.0.1:8888/admin/tool/upload'
                        listType='picture'
                    >
                        <Button>
                            <UploadOutlined /> Upload
                        </Button>
                    </Upload>
                </Form.Item>
                <Form.Item label="排序" name="sort">
                    <InputNumber />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6 }}>
                    <Button type="primary" htmlType="submit" style={{ marginRight: "6px" }}>保存</Button>
                    <Button onClick={() => {
                        close()
                    }}>取消</Button>
                </Form.Item>
            </Form>
        </Drawer>
    )
}